<template>
  <view class="container">
    <view class="content" style="display: flex;">
      <div class="input" style="background-color: seagreen; display: flex;">
        <p>
          <select style=" width: 140rpx; height: 45rpx; margin: 5%; line-height: 25px; font-size: 15px;">
            <option value="1">幼儿园</option>
            <option value="2">小学</option>
            <option value="3">中学</option>
            <option value="4">高中</option>
          </select>
        </p>

        <input type="text"
          style="margin: 5rpx; margin-left: 30rpx; width: 465rpx;  height: 45rpx;  border-radius: 15rpx; background-color: white;" />

        <img src="/static/聊天.png" alt=""
          style="margin-left:30rpx; margin-top: 2rpx;  margin-right: 30rpx;  height: 50rpx;  width: 50rpx;" />
      </div>
    </view>

  </view>

  <view class="lunbotyu" style="margin-top: 8rpx;">
    <swiper class="swiper" circular="true" autoplay="true" interval="60000">
      <swiper-item>
        <view class="swiper-item uni-bg-red"><img src="/static/轮播图1.png" alt="" style="height: 260rpx; width: 100%" />
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item uni-bg-red"><img src="/static/轮播图2.png" alt="" style="height: 260rpx; width: 100%;" />
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item uni-bg-blue">C</view>
      </swiper-item>
    </swiper>
  </view>

  <view class="xuanze">

    <dl class="dl">
      <dt class="dt"><img src="/static/在线直播.png" alt="" style="height: 80rpx;" />
        <p style="font-size: 4rpx;">在线直播</p>
      </dt>
      <dt class="dt"><img src="/static/错题集训.png" alt="" style="height: 80rpx;" />
        <p style="font-size: 4rpx;">错题集训</p>
      </dt>
      <dt class="dt"><img src="/static/学习日程.png" alt="" style="height: 80rpx;" />
        <p style="font-size: 4rpx;">学习日程</p>
      </dt>
      <dt class="dt"><img src="/static/交友圈.png" alt="" style="height: 80rpx;" />
        <p style="font-size: 4rpx;">交友圈</p>
      </dt>
      <dt class="dt"><img src="/static/课外技能.png" alt="" style="height: 80rpx; margin-left: 10rpx;" />
        <p style="font-size: 4rpx;">课外技能</p>
      </dt>
    </dl>

  </view>

  <view class="qu" style="margin-top: 40rpx; display: flex;">
    <dt><img src="/static/精品课堂.png" alt="" style="height: 145rpx; margin-left: 60rpx;" /></dt>
    <dt><img src="/static/交流区.png" alt="" style="height: 145rpx;  margin-left: 95rpx;" /></dt>
  </view>

  <view class="kecheng" style="margin: 10rpx; height: 500rpx;">
    <view style="display: flex; color: green;  justify-content: space-between;">
      <h5>推荐课程</h5>
      <h6 style="margin-top: 1rpx; margin-right: 8rpx;">全部课程</h6>
    </view>


    <view class="" style="background-color: burlywood;  margin: 5rpx;   padding: 5rpx; height: 190rpx;">
      1
    </view>
    <view class="" style="background-color: crimson; margin: 5rpx; margin-top: 40rpx;  padding: 5rpx; height: 190rpx;">
      2
    </view>

  </view>

</template>

<style>
  .search-bar {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: seagreen;
    border-radius: 10rpx;
  }

  .level-select {
    width: 140rpx;
    height: 45rpx;
    font-size: 28rpx;
    margin-right: 20rpx;
  }

  .search-input {
    flex: 1;
  }

  .search-input input {
    width: 100%;
    height: 45rpx;
    background-color: #fff;
    border-radius: 15rpx;
    padding: 0 20rpx;
  }

  .chat-icon image {
    width: 50rpx;
    height: 50rpx;
    margin-left: 20rpx;
  }

  .content {
    text-align: center;
  }

  .lunbotyu {
    width: 95%;
    height: 260rpx;
    margin: 20rpx;
    border-radius: 15rpx;
    background-color: pink;
  }

  .xuanze {
    height: 90rpx;
    /* background-color: skyblue; */
  }

  .dl {
    display: flex;
    height: 80rpx;
  }

  .dt {
    margin-left: 50rpx;
  }

  .qu {
    /* background-color: pink; */
  }

  .kecheng {
    background-color: skyblue;
  }
</style>


<script>
  export default {
    data() {
      return {
        title: 'Hello'
      }
    },
    onLoad() {

    },
    methods: {

    }
  }
</script>